button,
.button {
  padding: 5px 20px;
  font-size: $size16;
  line-height: 20px;
  border-radius: 3px;
  display: inline-block;
  background: $light;
  border: 1px solid darken($gray, 20%);
  outline: none;
  cursor: pointer;
  &.button-block{
    display: block;
    width: 100%;
  }
  &[disabled] {
    opacity: .6;
  }
  &:after {
    display: none;
  }
  &.button-hover {
    opacity: .85;
  }
  @include button-clear();
}

.button {
  &-light {
    @include button-style($light, $dark);
  }
  &-stable {
    @include button-style($stable);
    @include button-outline($stable,$dark06);
  }
  &-energized {
    @include button-style($energized);
    @include button-outline($energized, $energized);
  }
  &-dark {
    @include button-style($dark);
    @include button-outline($dark, $dark);
  }
  &-positive {
    @include button-style($positive);
    @include button-outline($positive, $positive);
  }
  &-calm {
    @include button-style($calm);
  }
  &-royal {
    @include button-style($royal);
  }
  &-dark07 {
    @include button-style(darken($dark, 20%))
  }
  &-assertive {
    @include button-style($assertive);
    @include button-outline($assertive, $assertive);
  }
  &-assertive-deep {
    @include button-style($assertive-deep);
    @include button-outline($assertive-deep, $assertive-deep);
  }
  &-balanced {
    @include button-style($balanced);
  }
  &-yellow {
    @include button-style($yellow);
  }
}
.border-energized{
  border: 1px solid $energized!important;
}
.border-positive{
  border: 1px solid $positive!important;
}
